<template>
  <div class="list-container">
    <div class="nav-space">
      <van-nav-bar title="消息详情"
                   fixed
                   left-arrow
                   @click-left="$router.go(-1)">
      </van-nav-bar>
    </div>
    <list-card :title="title"
               :leftIconSrc="icon"
               :rightDescription="`${date} ${time}`"
               rdColor="#999999">
    </list-card>
    <div class="tab-inner-wrap"
         ref="wrapper">
      <div class="detail-content">
        {{content}}
      </div>
    </div>
  </div>
</template>

<script>
import ListCard from '../../components/ListCard.vue'
import { reactive, toRefs, ref, onMounted, nextTick } from 'vue'
import { getMessageReportDetail } from '@/api/request/basic'
import usebScroll from '@/hooks/usebScroll'
export default {
  components: { ListCard },
  setup () {
    const state = reactive({
      title: '',
      date: '',
      time: '',
      content: '',
      icon: ''
    })
    const wrapper = ref()
    const $scroll = usebScroll()
    const loadDetail = () => {
      getMessageReportDetail({}).then(response => {
        const data = response.body.data.item
        state.title = data.title
        state.date = data.date
        state.time = data.time
        state.content = data.content
        state.icon = data.icon
        nextTick(() => {
          $scroll.initOrRefreshBScroll(wrapper.value)
        })
      })
    }
    onMounted(() => {
      loadDetail()
    })
    return {
      wrapper,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>
.tab-inner-wrap {
  height: calc(100vh - 44px - 80px) !important;
  padding: 12px;
  box-sizing: border-box;
  font-size: 14px;
  /* height: calc(100vh - 1.1733rem - 2.6667rem - 1.1733rem); */
}
</style>